<template>
	<view class="indexBox">
		<view class="indexFix">
			<!-- 搜索栏 -->
			<view class="search-bar">
				<van-row class="search-row">
					<van-col span="20" offset="1" class="search-col">
						<view @click="searchBtn">
							<van-search :value="goodsValue" placeholder="搜索单品"/>
						</view>
					</van-col>
					<van-col span="3" class="search-col col-img">
						<image src="~@/static/category/category.png" mode="aspectFill" class="categoryImg"></image>
					</van-col>
				</van-row>
			</view>
			<view class="top-bannar">
				<scroll-view scroll-x="true">
					<view class="scorll-x">
						<block v-for="(item, index) in itemList" :key="index">
							<text class="itemlist"
								  :class="activeIndex==index?'active':''"
								  @click="btnItem(index)">{{item.cateType}}</text>
						</block>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 主要内容 -->
		<MainContent :barType="barType"/>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsValue: '',
				itemList: [],
				activeIndex: 0,
				barType: 'search'
			}
		},
		onLoad() {

		},
		created() {
			let that = this
			uniCloud.callFunction({
				name: 'allGoods',
				data: {
					type: "getBarList"
				}	
			}).then(res => {
				let result = res.result.data.data
				that.itemList.push({'cateType': '搜索', 'type': 'search'})
				for(let i = 0; i < result.length; i++) {
					that.itemList.push({"cateType": result[i].cateType, "type": result[i].type})
				}
			})
		},
		methods: {
			btnItem(x) {
				this.activeIndex = x;
				this.barType = this.itemList[x].type
			},
			searchBtn() {
				uni.navigateTo({
					url: "/pages/search/search"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.indexBox {
		.indexFix {
			position: fixed;
			width: $uni-width;
			z-index: 10;
			background-color: #fff;
			margin-bottom: 10rpx;
		}
		// 搜索栏
		.search-bar {
			.search-row {
				height: 88rpx;
				.search-col {
					height: 88rpx;
					line-height: 88rpx;
					.categoryImg {
						width: 60rpx;
						height: 60rpx;
						margin-top: 23rpx;
					}
				}
			}
		}
		.scorll-x {
			white-space: nowrap;
			.itemlist {
				display: inline-block;
				width: 120rpx;
				height: 30rpx;
				line-height: 30rpx;
				text-align: center;
				color: #b3b3b3;
			}
			.active {
				font-weight: 700;
				color: #000000;
			}
		}
		.content {
			margin-top: 20rpx;
		}
	}
	.uni-scroll-view ::-webkit-scrollbar {
		 display: none;
		 width: 0;
		 height: 0;
		 color: transparent;
		 background: transparent;
		}
	
</style>
